<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>留言管理</title>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="comment" lay-filter="comment"></table>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/html" id="bar">
  {{#  if(d.state === 'INIT'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="pass">通过</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="refuse">拒绝</a>
  {{#  } }}
</script>
<script th:inline="none" type="text/javascript">
  $.ajaxSetup({
    dataType: "json",
    contentType: "application/json",
  });
  layui.use(['table', 'form'], function () {
    let table = layui.table;
    let form = layui.form;
    const commentTable = table.render({
      id: "commentTable",
      elem: '#comment',
      url: "/api/room/comment/page",
      method: 'post',
      title: '多功能厅留言信息表',
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'id', width: 50,},
        {field: 'userName', title: '用户姓名', width: 100,},
        {field: 'roomNumber', title: '房间号',},
        {
          field: 'state', title: '留言状态', align: 'center', templet: function (data) {
            switch (data.state) {
              case "INIT":
                return "申请中";
              case "PASS":
                return "已通过";
              case "REFUSE":
                return "已申请";
            }
          }
        },
        {field: 'context', title: '内容',},
        {fixed: 'right', title: '操作', toolbar: '#bar', width: 200}
      ]],
      page: true,
      request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      response: {
        statusCode: 2000 //重新规定成功的状态码为 2000，table 组件默认为 0
      },
      parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.records//解析数据列表
        };
      }
    });
    
    //监听行工具事件
    table.on('tool(comment)', function (obj) {
      let data = obj.data;
      const layEvent = obj.event;
      switch (layEvent) {
        case 'pass':
          layer.confirm('你确认要通过该评论吗？', function (index) {
            $.post("/api/room/comment/pass/" + data.id, function (data) {
              if (data.code === 2000) {
                layer.msg("处理成功")
                commentTable.reload()
              } else {
                layer.msg(data.message);
              }
            });
            layer.close(index);
          });
          break;
        case 'refuse':
          layer.confirm('你确认要取消该评论吗？', function (index) {
            $.post("/api/room/comment/refuse/" + data.id, function (data) {
              if (data.code === 2000) {
                layer.msg("处理成功")
                commentTable.reload()
              } else {
                layer.msg(data.message);
              }
            });
            layer.close(index);
          });
          break;
      }
    });
  });
</script>
</body>
</html>